<template>
    <div class="disCheck">
        <el-form-item label="上一期问卷绑定">
            <div style="width: 100%;min-height: 30px;padding: 0 10px;border: 1px solid rgba(203,201,201,0.5);border-radius: 2px"
            v-html="self0ptions.options.lastWenjuanItemName" @click="openWenjuan">
            </div>
        </el-form-item>


        <el-dialog
                title="上一期问卷题目绑定"
                :visible.sync="dialogVisible"
                width="50%"
        >
<!--            <el-form ref="form" :model="searchForm" label-width="120px">-->
<!--                <el-form-item label="问卷题目">-->
<!--                    <el-select v-model="searchForm.id" placeholder="请选择问卷题目"></el-select>-->
<!--                </el-form-item>-->
<!--            </el-form>-->

            <el-table :data="tabData" border
                      @selection-change="handleSelectionChange"
                      ref="myTable">
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="题目名称"
                    prop="displayName"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div v-html="scope.row.displayName"></div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height: 20px"></div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitWen">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "lastWenjuanItemName-editor",
    props: {
        self0ptions: {
            type: Object,
        }
    },
    inject: ['lastWenJson'],
    data() {
        return {
            tabData: [],
            dialogVisible: false,
            selTitle:[],
            searchForm:{
                id:'',
            },
            paging:{
                currentPage:1,
                pageSize:10,
                total:0
            },
            affirmSelectList:[],
        }
    },
    created() {
        this.tabData = []
        this.selTitle = []
        const value = JSON.parse(this.lastWenJson)
        for (let val of value.containerConfigList) {
            for (let childVal of val.widgetList) {
                this.tabData.push({
                    ...childVal
                })
                this.selTitle.push({
                    id:childVal.id,
                    displayName:childVal.displayName
                })
                continue
            }
        }
        this.paging.total = this.tabData.length
        this.tabData.forEach((item) => {
            if(item.id == this.self0ptions.options.lastWenjuanItem){
                this.$nextTick(() => {
                    this.$refs.myTable.toggleRowSelection(item);
                })
            }
        })
    },
    methods: {
        openWenjuan() {
            // this.searchForm.id = ''
            // this.paging.currentPage = 1
            // this.paging.pageSize = 10
            this.dialogVisible = true

            this.tabData.forEach((item) => {
                if(item.id == this.self0ptions.options.lastWenjuanItem){
                    this.$nextTick(() => {
                        this.$refs.myTable.toggleRowSelection(item,true);
                    })
                }
            })
        },
        submitWen(){
          if(this.affirmSelectList.length){
              this.self0ptions.options.lastWenjuanItemName = this.affirmSelectList[0].displayName
              this.self0ptions.options.lastWenjuanItem = this.affirmSelectList[0].id
              this.$message.success('绑定成功')
              this.dialogVisible = false
          }else{
              this.self0ptions.options.lastWenjuanItemName = ''
              this.self0ptions.options.lastWenjuanItem = ''
              this.dialogVisible = false
          }
        },
        handleSelectionChange(val) {
            if (val.length > 1) {
                this.$refs.myTable.clearSelection();
                this.$refs.myTable.toggleRowSelection(val.pop());
            }
            if(val.length != 0){
                this.affirmSelectList = val
            }
            if(val.length == 0){
                this.affirmSelectList = []
            }
        },
    }
}
</script>

<style scoped>
.disCheck ::v-deep .has-gutter .cell .el-checkbox{
    visibility: hidden;
}
</style>